import { FormEvent } from "react";
import { useAuth } from "../context/auth-context";

// const apiUrl = process.env.REACT_APP_API_URL;

export const LoginSreen = () => {
    const { login, user } = useAuth();

    // const login = (param: { username: string, password: string }) => {
    //     fetch(`${apiUrl}/login`, {
    //         method: "POST",
    //         headers: {
    //             "Content-type": "application/json"
    //         },
    //         body: JSON.stringify(param)
    //     }).then(async (res: Response) => {
    //         console.log(res)
    //     });
    // }

    // const register = (param: { username: string, password: string }) => {
    //     fetch(`${apiUrl}/register`, {
    //         method: "POST",
    //         headers: {
    //             "Content-type": "application/json"
    //         },
    //         body: JSON.stringify(param)
    //     }).then(async (res: Response) => {
    //         console.log(res)
    //     });
    // }

    const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
        event.preventDefault(); // 阻止表单提交
        const username = (event.currentTarget.elements[0] as HTMLInputElement)
            .value;
        const password = (event.currentTarget.elements[1] as HTMLInputElement)
            .value;
        login({
            username,
            password,
        });
    };
    return (
        <form onSubmit={handleSubmit}>
            {user ? (
                <div>
                    登录成功，用户名{user?.name}
                    token: {user.token}
                </div>
            ) : null}
            <div>
                <label htmlFor="username">用户名</label>
                <input type="text" id={"username"} />
            </div>
            <div>
                <label htmlFor="password">密码</label>
                <input type="text" id={"password"} />
            </div>
            <button type={"submit"}>登录</button>
        </form>
    );
};
